<template>
    <div class="my_header">
<div class="left">
    <van-icon name="wap-nav" size="22px" />
</div>
<div class="content">
    <div :class="{active:currentTag === 1}" @click="handleClick(1)">我的</div>
    <div :class="{active:currentTag === 2}"@click="handleClick(2)">发现</div>
    <div :class="{active:currentTag === 3}"@click="handleClick(3)">云村</div>
    <div :class="{active:currentTag === 4}" @click="handleClick(4)">视频</div>
</div>
<div class="right">
    <van-icon name="search" size="22px" />
</div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import  router  from '@/router/index.js';

let currentTag = ref(2)
const handleClick = (tag)=>{
    console.log(tag);
    currentTag.value = tag;
    router.push(
{ name: tag === 1 ? 'mine' : tag === 2 ? 'discover' : tag === 3 ? 'yuncun' : 'video'
})
}

</script>
<style scoped>

.my_header{
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0;
}
.my_header .content{
    display: flex;
    width: 180px;
    justify-content: space-around;
}
</style>